<template>
  <div>
    <div class="headerStyle" style="background-color: rgb(84, 92, 100);">
      <el-image style="margin-left:30px;margin-top:5px; height: 55px;width:161px;position: absolute" :src="require('../assets/img/logo1.png')" :fit="'fill'"></el-image>
      <div style="position: absolute;z-index: -1; top: 0; right: 0;height: 60px;">
        <el-tooltip class="item" effect="dark" content="注销" placement="top">
<!--          <img style="width: 200px;cursor: pointer" src="../assets/img/exit.png" class="imgButton" @click="logout"/>-->
        </el-tooltip>
      </div>
      <div style="display: flex;align-items: center;width: 800px;height: 80px;flex-flow: column;margin-left: 100px">
        <div style="display: flex">
          <h2 style="margin-top: 10px;color: rgb(255, 255, 255); font-size: 30px;">
            <span style="font-weight: lighter">全国铁路货车信息管理系统</span>
          </h2>
<!--          <el-breadcrumb separator="/" style="margin-top: 32px; margin-left: 10px">
            <el-breadcrumb-item :to="{ path: '/' }" ><span style="color: #ffffff">运营决策</span></el-breadcrumb-item>
            <el-breadcrumb-item><a href="/" style="color: #fff835">修程修制优化</a></el-breadcrumb-item>
          </el-breadcrumb>-->
        </div>
      </div>
    </div>
    <div>
      <side-bars :page-index="pageIndex"></side-bars>
    </div>
    <div class="bodyStyle">
      <div>
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<script>
  import sideBars from "./base/sideBars";
    export default {
      name: "NormalLayout",
      props:{
        pageIndex:{
          default:''
        }
      },
      components:{
          sideBars
      },
      methods:{

      }
    }
</script>

<style scoped>
.bodyStyle{
  position: fixed;
  left:15%;
  width: 85%;
  height: 100%;
  top:60px;
  overflow-y: auto;
  background-image: linear-gradient(to right, #fff1eb 0%, #ace0f9 100%);


  animation: upShow 0.5s;
  -moz-animation: upShow 0.5s;	/* Firefox */
  -webkit-animation: upShow 0.5s;	/* Safari 和 Chrome */
  -o-animation: upShow 0.5s;	/* Opera */

  -ms-scroll-chaining: chained;
  -ms-overflow-style: none;
  -ms-content-zooming: zoom;
  -ms-scroll-rails: none;
  -ms-content-zoom-limit-min: 100%;
  -ms-content-zoom-limit-max: 500%;
  -ms-scroll-snap-type: proximity;
  -ms-scroll-snap-points-x: snapList(100%, 200%, 300%, 400%, 500%);
  -ms-overflow-style: none;
  /*overflow-y: scroll;*/
}
  .headerStyle{
    position: fixed;
    top:0px;
    width: 100%;
    height: 60px;
  }

.imgButton{
  height: 25px;
  margin-top: 35px;
  margin-right: 30px;
}
</style>
